<!-- 此文件定义顶部组件，前后端都需要顶部组件 -->
<template>
  <div class="topbar">
    <!-- margin表示元素距离边框的距离 -->
    <div style="margin-left: 20px">小伟的博客系统</div>
    <div>
      <!-- 处于后台时，才显示前台按钮 -->
      <a-button
        v-if="pageType() === 'backend'"
        @click="router.push({ name: 'Frontend' })"
        type="text"
        >前台</a-button
      >
      <!-- 处于前台并且登录时，才显示后台按钮 -->
      <a-button
        v-if="pageType() === 'frontend' && state.is_login"
        @click="router.push({ name: 'Backend' })"
        type="text"
        >后台</a-button
      >
      <!-- v-if="!state.is_login"的理解：if中的条件为真，才会有登录按钮，state.is_login默认为false -->
      <a-button v-if="!state.is_login" @click="login" type="text">登录</a-button>
      <a-button type="text">
        <!-- 添加span是为了调整退出的边框，不然和icon挨在一起的 -->
        <span v-if="state.is_login" @click="logout" style="margin-right: 10px">退出</span>
        <icon-export />
      </a-button>
    </div>
  </div>
  <!-- 解释padding，border，margin的效果 -->
  <!-- <div style="padding: 20px; border: 10px solid #000; margin: 10px;">内容</div> -->
</template>

<script setup>
import { state } from '../stores/app'
import { useRouter } from 'vue-router'

const router = useRouter()
console.log(state.value)
const login = () => {
  router.push({ name: 'Login' })
}
const logout = () => {
  router.push({ name: 'Login' })
}
// 根据路由判断url中的路径是前台(frontedn)还是后台(backend)
const pageType = () => {
  // console.log(router.currentRoute.value.fullPath)  可通过日志，查看值
  // 判断是否以/frontend开头
  if (router.currentRoute.value.fullPath.startsWith('/frontend')) {
    return 'frontend'
  } else {
    return 'backend'
  }
}
pageType()
</script>

<style lang="css" scoped>
/* 调整样式时，在页面中调试 */
.topbar {
  height: 45px;
  border-bottom: 1px solid rgb(229, 230, 235);
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 元素的顶部和底部内边距为0像素，而左右内边距为12像素 */
  /* padding: 0px 12px; */
}
</style>
